<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>部门签收</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>
<div class="demoTable">
  <div class="layui-inline">
    <input style="width: auto;" type="text" class="layui-input" name="dname" id="dname" lay-verify="required" placeholder="请输入部门名称" autocomplete="off">
  </div>
  <button class="layui-btn" id="searchBtn" data-type="getInfo" style="float: left;">搜索</button>
</div>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script>
layui.use(['table','layedit','form','laydate'], function(){
	  var table = layui.table
	  var layedit = layui.layedit
	  ,$ = layui.jquery;
	  var form = layui.form   //form表单
	  var index = layedit.build("textarea", "content");
	  var laydate = layui.laydate //日期 
	  
//执行一个 table 实例
	table.render({
	  elem: '#demo'
	  ,height: 'full-230'
	  ,url: 'listShowSuperVisionWaitRegister' //数据接口
	  ,response: {
			statusCode: 200 //规定成功的状态码，默认：0
	   } 
	  ,page:true
	  ,even:true	
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
		{ type: 'numbers', title: '序号' }
	    ,{field: 'svTitle', title: '督办标题'}
	    ,{field: 'sname', title: '督办类型', width:120}
	    ,{field: 'dname', title: '督办部门', width:130}
	    ,{field: 'startTime', title: '发起督办时间'}
	    ,{field: 'realConfirmTime', title: '实际签收时间'}
	    ,{field: 'confirmTime', title: '截止签收时间',templet: '#endTimeTpl'}
	    ,{field: 'stid', title: '督办状态',width:100}
	    ,{field: 'replices', title: '回复次数',width:100}
	 	 ]
		]
	  ,id:'testReload'
	});
	
	  
	});
</script>
<!----------------------------- 表格单元格样式 ---------------------------------->
<script type="text/html" id="endTimeTpl">
  {{#  if(d.dname === '办公室'){ }}
    <span style="color: #00EC00;">{{ d.confirmTime }}</span>
  {{#  } else { }}
    <span style="color: #DC143C;">{{ d.confirmTime }}</span>
  {{#  } }}
</script>
<!------------------------------ 搜索框 ------------------------------------>

<script>
layui.use(['table'], function(){
	
//部门搜索
layui.$('#searchBtn').on('click',function(){ 
	var type = layui.$(this).data('type');
	active[type] ? active[type].call(this) : '';
});
// 点击获取数据
var  active = { getInfo: function () { 
	var dname=layui.$('#dname').val();
    if (dname) { 
    	var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
        setTimeout(function(){ 
        	table.reload('testReload', { //表格的id 
        		url:'selectDepartment',
                where: { dname:dname } 
        	});
            layer.close(index);
        },800);
    } else { 
    	layer.msg("请输入部门名称");
    } 
    },
};
	
})
</script>

 <!------------------------------------------------ 修改 ----------------------------------------------------->
<form class="layui-form layui-form-pane1" lay-filter="updateData" id="update" action="updateTime" method="post" style="height:400px" hidden="true">	
 	<input type="hidden" name="svid">
  <div class="layui-form-item">
    <label class="layui-form-label">签收时间</label>
  <div class="layui-inline">
	  <input type="text" name="confirmTime" autocomplete="off" class="layui-input" >
  </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">截止时间</label>
	  <div class="layui-inline">
		  <input type="text" name="endTime" autocomplete="off" class="layui-input" id="test6-1">
	  </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="first">保存修改信息</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="update">签收</a>
</script>

<script type="text/javascript" th:inline="javascript">  //用javascript获取model中数据
layui.use(['table', 'form', 'layedit', 'laydate'], function(){
	  var form = layui.form   //form表单
	  var layer = layui.layer  //弹出层
	  var $=layui.$;
  	  var table = layui.table;
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    var svid = data.svid;
    if(obj.event === 'update'){
    	//layer.alert(JSON.stringify(data));
    	//1.获取这行数据
    	//2.填充form
    	form.val("updateData",data); 
    	//首先需要使用lay-value来确定需要设置哪个元素自动选择
    	
    	//将部门选中状态改为之前的
    	layer.open({
    		type:1,
			title:'修改督办信息',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#update'),	
    	}) 
    }
  });
});

/*发起督查时间选择代码开始  */
  layui.use('laydate', function(){
	  var laydate = layui.laydate;  
	  //自定义背景色主题
	  laydate.render({
	    elem: '#test6-1' //指定元素
	    ,type: 'datetime'
	    ,theme: 'grid'
	    ,trigger: 'click'
	    ,isInitValue: true
	  });
	 
	});
</script>
</body>
</html>